<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>管理员列表</span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="fullname" label="姓名" />
            <el-table-column prop="sex" label="性别" />
            <el-table-column prop="tel" label="手机" />
            <el-table-column prop="email" label="邮箱" width='180' />
            <el-table-column prop="avatar" label="头像">
                <template #default="scope">
                    <div class="block">
                        <el-avatar shape="square" :size="50" :src="scope.row.avatar" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="role_name" label="角色" width='110'>
                <template #default="scope">
                    <el-tag>{{ scope.row.role_name }}</el-tag>
                </template>

            </el-table-column>
            <el-table-column label="操作" width='180'>
                <template #default="scope">
                    <el-space>
                        <el-link :href="`/#/admin/edit/${scope.row.id}`">
                            <el-button class="edit" type="primary" size="small">
                                <el-icon>
                                    <EditPen />
                                </el-icon>
                            </el-button>
                        </el-link>
                    
                            <el-button @click="handleRemove(scope.row.id,scope.$index)" size="small" type="danger">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </el-button>

                    </el-space>

                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script setup>
import { toRefs, reactive, ref, computed, onMounted, onUpdated } from 'vue';
import Admin from '@/api/admin';
// import { id } from 'element-plus/es/locale';
// import { ElMessageBox } from 'element-plus';
const tableData = ref([]);
async function loadList() {
    let { status, msg, total, data } = await Admin.list();
    if (status) {
        tableData.value = data;
    }
}
// loadList();
//挂载完成

loadList();


//删除操作
function handleRemove(id, i) {
    ElMessageBox.confirm('确定要删除？', '确认删除', { type: 'error', cancelButtonText: '取消', confirmButtonText: '确认' })
        .then(async () => {
            //点击确认
            //发送ajax
            let { status, msg } = await Admin.remove({ id })
            if (status) {
                ElMessage.success(msg);
                //操作DOM
                tableData.value.splice(i, 1);
            } else {
                ElMessage.error(msg);
            }
        })
        //取消
        .catch(() => {
            //取消
            ElMessage.info('取消成功');
        });
}
</script>
